<template>
  <van-overlay :show="isShow"  :lock-scroll="false" z-index="100">
    <div class="flex_center" style="height: 100vh">
      <div class="mask flex_center flex-c ">
        <div class="mask_cont" ref="generateImg">
          <!-- list.find(item => item.card_type === current).title -->
          <div class="title">{{ title }}</div>
          <div class="line_box mb-12">
            <img class="cont_icon" src="https://magic.mirror.source.axeastro.com/magic-mirror/cont_icon.png" alt="">
          </div>
          <div class="inner_cont">{{ content }}</div>
          <div class="line_box line_box1 mt-12">
            <img class="cont_icon" src="https://magic.mirror.source.axeastro.com/magic-mirror/cont_icon1.png" alt="">
          </div>
          <div class="opt flex_center">
            <img @click="onGetPoster" class="opt_btn mr-20" src="https://magic.mirror.source.axeastro.com/magic-mirror/save_btn.png">
            <button open-type="share">
              <img class="opt_btn" @click="isShowShare = true" src="https://magic.mirror.source.axeastro.com/magic-mirror/share_btn.png">
            </button>
          </div>
        </div>
        <img class="close" @click="$emit('update:isShow', false)" :src='require("@/assets/close_icon.png")' />
      </div>
    </div>
    <poster v-if="Object.keys(drawData).length" ref="poster" :drawData="drawData"></poster>
  </van-overlay>
</template>
<script>
import poster from '@/components/poster'
export default {
  components: { poster },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    owned: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
       drawData: {},
    }
  },
  methods: {
    getPoster() {
    },
    async onGetPoster() {
      this.setCanvasData()
      this.$nextTick(() => {
        this.$refs.poster.initCtx()
      })
    },
    setCanvasData() {
      this.drawData = {
        canvasData: {
          name: "保存内容",
          width: 370,
          height: 800,
          id: 'postercont'
        },
        // https://content.daylucky.cn/admin/image/1yvfmhcb14ngqpctztj7km8i.png
        // https://content.daylucky.cn/admin/image/e75eblukkdjp5o1w3kk7wk58.png
        drawList: [
           {
            type: 'img',
            // url: 'https://content.daylucky.cn/admin/image/id3f54q45gvs4vd98v2wb736.png',
            url: 'https://magic.mirror.source.axeastro.com/magic-mirror/poster_bg.png',
            top: 0,
            left: 0,
            width: 370,
            height: 790,
            // shape: 'circle'
          }, 
          // {
          //   type: 'img',
          //   url: 'https://content.daylucky.cn/admin/image/z9zjeev3xr4cgjn8h9r57q8h.png',
          //   top: 42,
          //   left: 43,
          //   width: 290,
          //   height: 52
          // },
          // {
          {
            type: 'text',
            // content: '目前最能帮助你的人是谁', type === 0 ? '近期发生的事情和建议' : '对方内心最真实的一面'
            content: '魔镜魔镜告诉我',
            top: 72,
            // left: this.type === 1 ? 140 : 90,
            left: 'center',
            fontSize: 33,
            lineHeight: 39,
            color: '#ffffff',
            weight: 400,
            // maxWidth: 279,
            maxLineNum: 1,
            fontFamily: 'WDCH-Regular, WDCH'
          },
          // 引号 上
          {
            type: 'img',
            url: 'https://magic.mirror.source.axeastro.com/magic-mirror/yinhao_top.png',
            top: 200,
            left: 42,
            width: 30,
            height: 24
          },
          // 引号 下
          {
            type: 'img',
            url: 'https://magic.mirror.source.axeastro.com/magic-mirror/yinhao_bottom.png',
            top: 650,
            left: 298,
            width: 30,
            height: 24
          },
          {
            type: 'text',
            // content: '目前最能帮助你的人是谁', type === 0 ? '近期发生的事情和建议' : '对方内心最真实的一面'
            content: this.title || '目前最能帮助你的人是谁',
            top: 127,
            // left: this.type === 1 ? 140 : 90,
            left: 'center',
            fontSize: 24,
            lineHeight: 28,
            color: '#131A28',
            weight: 400,
            maxWidth: 279,
            maxLineNum: 1,
            fontFamily: 'WDCH-Regular, WDCH'
          },
          {
            type: 'text',
            content: this.content,
            top: 250,
            left: 48,
            fontSize: 16,
            lineHeight: 26,
            color: '#131A28',
            weight: 400,
            maxWidth: 279,
            maxLineNum: 16
          }
        ]
      }
    },
  }
}
</script>
<style lang="scss">
.mask {
  font-size: 28rpx;
  font-weight: 400;
  color: #131a28;
  line-height: 42rpx;
  .mask_cont {
    width: 654rpx;
    height: 1174rpx;
    // height: calc(100vh - 120px - env(safe-area-inset-bottom));
    position: relative;
    background: url("https://magic.mirror.source.axeastro.com/magic-mirror/mask_bg.png")  no-repeat top 26px left 0;
    background-size: 654rpx 1122rpx;
    text-align: center;
    .title {
      text-align: center;
      font-size: 32rpx;
      font-family: WDCH-Regular, WDCH;
      min-width: 446rpx;
      display: inline-block;
      height: 88rpx;
      line-height: 88rpx;
      color: #fff;
      padding-left: 40rpx;
      padding-right: 40rpx;
      margin-left: 16rpx;
      border-width: 2rpx;
      margin-bottom: 38rpx;
      // border-style: solid;
      border-image: url("https://magic.mirror.source.axeastro.com/magic-mirror/mask_title.png")  0 100 0 100 fill / 1px 163px stretch;
    }
    .line_box {
      position: relative;
      background: url("https://magic.mirror.source.axeastro.com/magic-mirror/line.png") no-repeat top 22rpx left 104rpx ;
      background-size: 510rpx 4rpx;
      height: 36rpx;
      .cont_icon {
        width: 44rpx;
        height: 36rpx;
        position: absolute;
        top: 0;
        left: 40rpx;
       
      }
      &.line_box1 {
        background-position: left 40rpx top 22rpx;
        .cont_icon {
          left: 570rpx;
        }
      }

    }
    .inner_cont {
      height: 728rpx;
      text-align: left;
      overflow-y: auto;
      padding-left: 50rpx;
      padding-right: 40rpx;
      -webkit-overflow-scrolling: touch;
      // flex: 1;
      // height: auto;
      // 解决滚动条隐藏问题
      // padding-right: 30px;
      width: 100%;
      // max-height: calc(~"100% - 97px");

    }

    .opt {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 40rpx;

      .opt_btn {
        width: 274rpx;
        height: 96rpx;
      }
    }
  }

  

  .close {
    width: 64rpx;
    height: 64rpx;
    margin-top: 36rpx;
  }
}
</style>